<template>
  <div class='trend-analysis'>
    <div class="naviga">&nbsp;&nbsp;{{$store.state.marketName}}&nbsp;>&nbsp;市场宏观趋势&nbsp;>&nbsp;机会威胁分析&nbsp;>&nbsp;趋势分析</div>
    <div class='trend-analysis-con'>
      <div class='border-card clearfix'>
        <span
          @click="getAnalysis(item)"
          v-for="(item,index) in arr">{{item}}</span>
      </div>
      <div class='info-con' style="width: 100%">
        <div class='info-bar'>
          <p class="router">
            <router-link class='go-router'  :to="{path:'/full/marketMenu/targetMarketTrends/opportunityDetails/trendInfluence'}">趋势影响&nbsp;&nbsp;&rsaquo;</router-link>
          </p>
          <p class='go-back' @click="$router.go(-1)">&lsaquo;&nbsp;&nbsp;返回上一步</p>

        </div>
        <div class='info-con1 col-xs-12' style="padding: 0">
          <div class='info-left col-xs-8' >
            <div>
              <h2>上一步分析结果的合并展示</h2>

              <ul
                class="analysis"
                @click="getRightSH(item.otherOpportunityId),getRightJJ(item.economyId)"
                v-for='(item,index) in analysisList'>
                <el-tooltip class="item" effect="dark"  :content="item.analysisResult" placement="top-start">
                  <div>
                    <p>{{index+1}}.</p>
                    <p style="word-break: break-all;">{{item.analysisResult}}</p>
                    <img @click="deleteAnalysis(item)" src="../../../images/delete.png"/>
                  </div>
                 </el-tooltip>
              </ul>
            </div>
          </div>
          <div class='info-right col-xs-4' >
            <div>
               <h3>分析的因素</h3>
              <ul :class="{ borderBottom: isActive }">
                <h2>{{socit}}</h2>
                <p>{{socioty}}</p>
              </ul>
              <ul :class="{ borderBottom: isActive }">
                <h2>{{econ}}</h2>
                <p>{{economy}}</p>

              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["机会", "威胁"],
      analysisList: [],
      marketId: "",
      socioty: "",
      economy: "",
      activeNames: ["1"],
      socit: "社会",
      econ: "经济",
      isActive: true,
      leftName: ""
    };
  },
  mounted() {
    this.marketId = this.$store.state.id;
    //let analysis="机会"
    this.getAnalysis(this.arr[0]);
    //默认进入
    $(".border-card span")
      .eq(0)
      .addClass("active");
    $(".border-card span").on("click", function() {
      $(this)
        .addClass("active")
        .siblings()
        .removeClass("active");
    });
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    //通过机会或者是威胁去获取进一步的分析结果
    getAnalysis(item) {
      console.log(item);
      this.leftName = item;
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOpportunityAnalysis",
          query: {
            marketId: this.marketId,
            analysisType: item
          }
        })
        .then(res => {
          this.analysisList = res.data.data.list;
          console.log(this.analysisList.length);
          if (this.analysisList.length == 0) {

            this.socioty = "";
            this.economy = "";
            this.socit = "";
            this.econ = "";
            this.isActive = false;
            return;
          } else {
            this.socit = "社会";
            this.econ = "经济";
            this.isActive = true;
            let firstAnalysis = res.data.data.list[0];
            let sH = firstAnalysis.otherOpportunityId; //第一个分析结果的社会ID
            let jJ = firstAnalysis.economyId; //第一个分析结果的经济ID
            this.getRightSH(sH); //通过id获取右边社会
            this.getRightJJ(jJ); //通过id获取右边经济
          }
          //获取右边的社会经济
          //默认第一个被选中
          this.$nextTick(function() {
            $(".analysis")
              .eq(0)
              .addClass("active1");
            $(".analysis").on("click", function() {
              $(this)
                .addClass("active1")
                .siblings()
                .removeClass("active1");
            });
          });
        })
        .catch(error => {});
    },
    //获取右边社会社会接口
    getRightSH(id) {
      console.log(id);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOneOpportunityThreat",
          query: { id: id }
        })
        .then(res => {
          this.socioty = res.data.data.content;
        })
        .catch(error => {});
    },
    //获取右边社会经济接口
    getRightJJ(id) {
      console.log(id);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOneOpportunityThreat",
          query: { id: id }
        })
        .then(res => {
          this.economy = res.data.data.content;
        })
        .catch(error => {});
    },
    //删除分析结果
    deleteAnalysis(item) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "delOpportunityAnalysis",
          data: { id: item.id }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getAnalysis(this.leftName);
          }else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
        })
        .catch(error => {});
    }
  },
  watch: {}
};
</script>
<style lang="less">
.trend-analysis-con {
  .go-router {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .go-back{
    cursor: pointer;
    padding: 0;
  }
  .router{
    padding: 0;
  }
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;

  }
  .analysis {
    .item {
      width: 100%;
      height: 50px;
      display: flex;
    }

    img {
      //float: right;
      width: 20px;
      height: 20px;
      margin-top: 15px;
      margin-right: 5px;
    }
    p:nth-child(1) {
      // float: left;
      width: 5%;
    }
    p:nth-child(2) {
      //float: left;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  .active {
    border-top: 2px solid #3aaaec;
    background: #fff;
  }
  .active1 {
    background: #d9effc;
    color: #58b4ee;
  }
  .borderBottom {
    border-bottom: 1px solid #e0e0e0;
  }
  > .border-card {
    width: 97.65%;
    margin: auto;
    > span {
      display: block;
      width: 6.6%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      float: left;
    }
  }
  .info-con {
    > .info-bar {
      width: 100%;
      height: 90px;
      background: #fff;
      > p:nth-child(1) {
        float: right;
        width: 180px;
        height: 46px;
        text-align: center;
        background: linear-gradient(to right, #3bc9e2, #08acf2);
        border-radius: 6px;
        line-height: 46px;
        margin-right: 20px;
        margin-top: 22px;
      }
      > p:nth-child(2) {
        float: right;
        width: 180px;
        height: 46px;
        text-align: center;
        background: #acc6d3;
        border-radius: 6px;
        line-height: 46px;
        margin-right: 20px;
        margin-top: 22px;
        color: #fff;
      }
    }
    > .info-con1 {
      width: 100%;
      height: auto;
      > .info-left {
        > div {
          height: 450px;
          border-radius: 8px;
          border: 1px solid #e0e0e0;
          overflow: scroll;
          background: #fff;
          > h2 {
            font-size: 16px;
            background: #eeeeee;
            margin: 0;
            line-height: 50px;
            padding-left: 20px;
          }
          > ul {
            height: 50px;
            border-bottom: 1px solid #e0e0e0;
            line-height: 50px;
            text-align: start;
            padding-left: 20px;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
            > img {
              width: 26px;
              height: 26px;
              position: absolute;
              right: 20px;
              margin-top: 15px;
            }

            > p {
              position: absolute;

              top: 0;
              z-index: 0;
            }
          }
        }
      }
      > .info-right {
        > div {
          height: 450px;
          border-radius: 8px;
          border: 1px solid #e0e0e0;
          overflow: scroll;
          background: #fff;
          > h3 {
            font-size: 16px;
            background: #eeeeee;
            margin: 0;
            line-height: 50px;
            padding-left: 20px;
          }
          > ul {
            padding-left: 0;
            //  border-bottom: 1px solid #e0e0e0;
            > h2 {
              font-size: 18px;
              color: #4e5255;
              line-height: 48px;
              padding-left: 20px;
              //background: #eff6fc;
              margin-top: 0;
            }
            > p {
              font-size: 14px;
              line-height: 20px;
              padding-left: 20px;
              padding-right: 20px;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
  .el-tabs__content {
    padding: 0;
  }
}
</style>
